<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>某产品行业销量分布 Top10</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
<style>
    .bottom-tool-box{position: absolute; bottom:0px; left: 0px; width: 100%; height:40px; z-index:1000}
    .bottom-tool-box .sort-button {width: auto; height:40%; position: absolute; top:30%; left:70%}
</style>
<div class="bottom-tool-box">
    <img class="sort-button" src="/assets/image/g2/demo/sortbar.png"></div>
<script>
    var sortType = 'positive';
    var data = [{
        type: '汽车',
        value: 34
    }, {
        type: '建材家居',
        value: 85
    }, {
        type: '住宿旅游',
        value: 103
    }, {
        type: '交通运输与仓储邮政',
        value: 142
    }, {
        type: '建筑房地产',
        value: 251
    }, {
        type: '教育',
        value: 367
    }, {
        type: 'IT 通讯电子',
        value: 491
    }, {
        type: '社会公共管理',
        value: 672
    }, {
        type: '医疗卫生',
        value: 868
    }, {
        type: '金融保险',
        value: 1234
    }];
    var chart = new G2.Chart({
        container: 'mountNode',
        forceFit: true,
        height: window.innerHeight,
        padding: [20, 40, 50, 124]
    });
    chart.source(data, {
        value: {
            max: 1300,
            min: 0,
            nice: false,
            alias: '销量（百万）'
        }
    });
    chart.axis('type', {
        label: {
            textStyle: {
                fill: '#8d8d8d',
                fontSize: 12
            }
        },
        tickLine: {
            alignWithLabel: false,
            length: 0
        },
        line: {
            lineWidth: 0
        }
    });
    chart.axis('value', {
        label: null,
        title: {
            offset: 30,
            textStyle: {
                fontSize: 12,
                fontWeight: 300
            }
        }
    });
    chart.legend(false);
    chart.coord().transpose();
    chart.interval().position('type*value').size(26).opacity(1).label('value', {
        textStyle: {
            fill: '#8d8d8d'
        },
        offset: 10
    });
    chart.render();
    $('.sort-button').click(function() {
        sortType = sortType === 'positive' ? 'negative' : 'positive';
        sortData(sortType);
        chart.repaint();
    });

    function sortData(sortType) {
        if (sortType === 'positive') {
            data.sort(function(a, b) {
                return b.value - a.value;
            });
        } else {
            data.sort(function(a, b) {
                return a.value - b.value;
            });
        }
    }
</script>
</body>
</html>
